<template>
    <div class="main">  
      <mt-header fixed :title="selected"></mt-header>
  <van-tabs class="van-tabs" v-model="active"  @click="navid()">
  <van-tab v-for="v in navfiy" :title="v.navigationName" :key="v.id" >
  </van-tab>
</van-tabs>
<br><br>
<div v-for="v in navmusic" :key="v.id" class="d1" @click="audio(v)">
    <div class="div_img">
      <img :src="v.albumPicUrl" alt="">
    </div>
    <div>
      <p>作者：{{v.artistName}}</p>
      <p>专辑：{{v.albumName}}</p>
      <p>名称：{{v.musicName}}</p>
      <p>分类：{{v.navigationName}}</p>
    </div>
    
</div>
    <br>
    <br>
    <br>
    <br>
    <br>
    </div>
</template>
<script>
import url from "../tools/url"
import { Indicator } from 'mint-ui';
export default {
    name:"classify",
    data() {
        return {
          active:0,
          selected:"分类页",
          navfiy:{},
          navmusic:[],
        }
    },
    methods: {
      navid(){
        Indicator.open();
        var id=this.active+1;
        var str=`token=${sessionStorage.getItem("token")}&id=${id}`
        if(id==1){
          var str=`token=${sessionStorage.getItem("token")}`
            this.axios.post(url.FINDALLMUSICS,str).then(pro=>{
            this.navmusic=pro.data.data;
            Indicator.close();
          })
        }else{
           this.axios.post(url.FINDALLMUSICSBYID,str).then(pro=>{
            this.navmusic=pro.data.data;
            Indicator.close();
           })
        }
        
      },
      audio(v){
        this.$store.commit("audio",v)
      }
    },
    mounted() {
      //请求导肮条标题
      var str=`token=${sessionStorage.getItem("token")}`
      this.axios.post(url.FINDALL,str).then(pro=>{
        this.navfiy=pro.data.data;
      })
      //请求推荐内容
        this.axios.post(url.FINDALLMUSICS,str).then(pro=>{
        this.navmusic=pro.data.data;
      })
    },
}
</script>
<style scoped>
.main{
  margin-bottom: 20px;
}
.van-tabs{
  width: 100%;
  position: fixed;
  margin-top:1%;
  z-index: 99;
}
.div_img{
  width: 20%;
}
img{
  width: 100%;
}
.d1{
  display: flex;
  background-color: white;
  padding: 10px;
  margin: 8px;
}
</style>